import React from 'react';
import { AppBar, Toolbar, Typography, Paper, Grid, Button, TextField, Tooltip, IconButton } from '@material-ui/core';
// tslint:disable-next-line:no-submodule-imports
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import { Search, Refresh } from '@material-ui/icons';

const styles = (theme: Theme) =>
  createStyles({
    paper: {
      maxWidth: 936,
      margin: 'auto',
      overflow: 'hidden'
    },
    searchBar: {
      borderBottom: '1px solid rgba(0, 0, 0, 0.12)'
    },
    searchInput: {
      fontSize: theme.typography.fontSize
    },
    block: {
      display: 'block'
    },
    addUser: {
      marginRight: theme.spacing(1)
    },
    contentWrapper: {
      margin: '40px 16px'
    }
  });

export interface IContentProps extends WithStyles<typeof styles> {}

function Content(props: IContentProps) {
  const { classes } = props;

  return (
    <Paper className={classes.paper}>
      <AppBar className={classes.searchBar} position="static" color="default" elevation={0}>
        <Toolbar>
          <Grid container spacing={2} alignItems="center">
            <Grid item>
              <Search className={classes.block} color="inherit" />
            </Grid>
            <Grid item xs>
              <TextField
                fullWidth
                placeholder="Search by email address, phone number, or user UID"
                InputProps={{
                  disableUnderline: true,
                  className: classes.searchInput
                }}
              />
            </Grid>
            <Grid item>
              <Button variant="contained" color="primary" className={classes.addUser}>
                Add user
              </Button>
              <Tooltip title="Reload">
                <IconButton>
                  <Refresh className={classes.block} color="inherit" />
                </IconButton>
              </Tooltip>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
      <div className={classes.contentWrapper}>
        <Typography color="textSecondary" align="center">
          No users for this project yet
        </Typography>
      </div>
    </Paper>
  );
}

export default withStyles(styles)(Content);
